<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        form div {
            height: 40px;
            line-height: 40px;
        }
        
        form div:nth-child(4) {
            height: auto;
        }
        
        form div span:first-child {
            display: inline-block;
            width: 100px;
        }
    </style>
</head>

<body>
    <div id="app">
        <form>
            <div>
                <span>姓名：</span>
                <span>
          <input type="text" v-model='uname'>
        </span>
            </div>
            <div>
                <span>性别：</span>
                <span>
          <input type="radio" id="male"   value="man" v-model='gender'>
          <label for="male">男</label>
          <input type="radio" id="female" value="woman" v-model='gender'>
          <label for="female">女</label>
        </span>
            </div>
            <div>
                <span>爱好：</span>
                <input type="checkbox" id="ball" value='ball' v-model='hobby'>
                <label for="ball">篮球</label>
                <input type="checkbox" id="sing" value='sing' v-model='hobby'>
                <label for="sing">唱歌</label>
                <input type="checkbox" id="code" value='code' v-model='hobby'>
                <label for="code">写代码</label>
            </div>
            <div>
                <span>职业：</span>
                <select v-model='occupation' multiple>
                    <option value="0">请选择职业...</option>
                    <option value="1">教师</option>
                    <option value="2">软件工程师</option>
                    <option value="3">律师</option>
                </select>
            </div>
            <div>
                <span>个人简介：</span>
                <textarea v-model='desc'></textarea>
            </div>
            <div>
                <input type="submit" value="提交" @click.prevent='handle'>
            </div>
        </form>
    </div>
    <script type="text/javascript" src="../../vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                uname: 'wzp',
                gender: 'man',
                hobby: ['ball', 'sing'],
                // occupation: 1,
                occupation: ['1', '2'],
                desc: '用法与input表单的语法相同',

            },
            methods: {
                handle: function() {
                    console.log(this.uname)
                    console.log(this.gender)
                    console.log(this.hobby.toString())
                    console.log(this.occupation)
                    console.log(this.desc)

                }
            }
        });
    </script>
</body>

</html>